<template>
  <el-container class="home-container">
    <el-header :style="headStyle">
      <!-- 头部标题 退出栏 -->
      <div class="project-title">
        <div class="titles">{{ System_Name }}</div>
        <el-button
          style="font-size: 16px"
          icon="el-icon-switch-button"
          type="text"
          @click="$router.push('/')"
          >退出</el-button
        >
      </div>
    </el-header>

    <el-container>
      <el-aside :style="asideStyle" :width="isCollapse ? '64px' : '275px'">
        <div class="toggle-button" @click="toggleCollapse">
          <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
        </div>
        <el-scrollbar class="tree_scroll">
          <el-menu
            unique-opened
            :background-color="menuBackgroundColor"
            text-color="#fff"
            active-text-color="#ffd04b"
            :default-active="$route.path"
            :collapse-transition="false"
            :collapse="isCollapse"
            router
          >
            <div v-for="menu in menuList" :key="menu.name">
              <el-menu-item v-if="!menu.children" :index="menu.path">
                <i :class="[menu.icons, 'icons']"></i>
                <span slot="title">{{ menu.name }}</span>
              </el-menu-item>

              <!-- 存在二级菜单 -->
              <el-submenu v-if="menu.children" :index="menu.path">
                <template slot="title">
                  <i :class="[menu.icons, 'icons']"></i>
                  <span v-show="!isCollapse" slot="title">
                    {{ menu.name }}
                  </span>
                </template>

                <!-- 二级菜单 -->
                <el-menu-item
                  v-for="twoLevelMenu in menu.children"
                  :key="twoLevelMenu.name"
                  :index="twoLevelMenu.path"
                >
                  <template slot="title">
                    <i
                      style="margin-left: 0px"
                      :class="[twoLevelMenu.icons]"
                    ></i>
                    <span>{{ twoLevelMenu.name }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
            </div>
          </el-menu>
        </el-scrollbar>
      </el-aside>

      <el-main>
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />
        <div class="tips">
          <el-dropdown trigger="click">
            <el-button
              size="mini"
              type="primary"
              circle
              icon="el-icon-plus"
            ></el-button>
            <el-dropdown-menu>
              <el-dropdown-item>
                <color-theme />
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import ColorTheme from "../SystemSetting/ColorTheme"
export default {
  name: "Index",
  data() {
    return {
      System_Name,
      menuBackgroundColor: localStorage.getItem("themeColor") || "#1f4963",
      headStyle: {
        "background-color": localStorage.getItem("themeColor") || "#1f4963",
      },
      asideStyle: {
        "background-color": localStorage.getItem("themeColor") || "#1f4963",
      },
      menuList: [
        {
          name: "规范管理",
          path: "/StandardCodeManage",
          icons: "el-icon-notebook-2",
        },
        {
          name: "文档管理2",
          path: "",
          icons: "el-icon-setting",
          children: [
            {
              name: "xxx1",
              path: "/ExcelManage",
              icons: "el-icon-menu",
            },
            {
              name: "xxx2",
              path: "",
              icons: "el-icon-menu",
            },
            {
              name: "xxx3",
              path: "",
              icons: "el-icon-menu",
            },
          ],
        },
        {
          name: "文档管理3",
          path: "",
          icons: "el-icon-user",
        },
      ],
      isCollapse: false,
    }
  },

  components: {
    ColorTheme,
  },

  methods: {
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },

    handleColorChange(v) {
      this.menuBackgroundColor = v
      this.headStyle["background-color"] = v
      this.asideStyle["background-color"] = v
    },

    logout() {
      this.$router.push({
        path: "/login",
      })
    },
  },

  mounted() {
    this.$bus.$on("changeColor", this.handleColorChange)
  },
}
</script>

<style lang="less" scoped>
.icons {
  color: #fff;
}
.home-container {
  /deep/ .el-menu-item [class^="el-icon-"] {
    margin-right: 10px !important;
  }
  height: 100%;
  /deep/.el-menu-item {
    font-size: 16px;
  }
  /deep/.el-submenu__title {
    font-size: 16px;
  }

  .tips {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 888;
  }
}
.el-main,
.el-footer {
  background-color: #eaedf1;
}

.home-container {
  .el-main {
    height: calc(100vh - 50px);
    overflow: auto;
  }

  .el-menu {
    height: calc(100vh - 76px);
    overflow: auto;
    overflow-x: hidden;
  }
}
.el-footer {
  height: 30px !important;
  font-size: 14px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 350px;
}
.el-menu {
  border-right: none;
}

.el-header {
  height: 50px !important;
  padding: 0px;
}

.toggle-button {
  background-color: rgb(82, 182, 240);
  // background-color: rgba(44, 49, 52, 1);
  color: #fff;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
}

.project-title {
  /deep/ .el-icon-switch-button {
    font-size: 17px;
  }
  height: 100%;
  display: flex;
  justify-content: space-between;
  padding-right: 23px;
  // justify-content: center;
  align-items: center;
  color: #fff !important;
  .titles {
    color: #fff;
    margin-left: 23px;
    // margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
  }
  .user-info {
    float: right;
    margin-top: -22px;
    margin-right: 40px;
    .login-name {
      color: #fff;
      font-size: 16px;
      font-weight: bold;
    }
  }
}

/deep/.el-submenu__icon-arrow {
  color: #fff !important;
}
</style>
